// 引入commoncss文件
@import "common";

body{
    min-width: 320px;
    width: 15rem;
    margin: 0 auto;
    font-family: Arial, Helvetica;
    background: #f2f2f2;
}
*{
    margin: 0;
    padding: 0;
}

@font-size:50px;

.top{
    margin: auto;
    position: relative;

}

.top img{
    width: (750rem / @font-size);
    height: (90rem / @font-size);
    vertical-align: top;
}

.top span{
    position: absolute;
    display: block;
    top: (24rem / @font-size);
    left: (19rem / @font-size);
    width: (40rem / @font-size);
    height: (40rem / @font-size);
    background: url(../imagin/header-2.png) no-repeat;
    background-size: (40rem / @font-size);
}

.top  a i{
    position: absolute;
    top: 0px;
    right: 0px;
    display: block;
    width: (185rem / @font-size);
    height: (90rem / @font-size);
}

// 顶部end

// 头部start
.search-hd{
    display: flex;
    justify-content: space-between;
    background-color: #ffdb47;
    padding: (15rem / @font-size) (28rem / @font-size) 0 (28rem / @font-size);
}

.search-hd img{
    flex: 1;
}

.search-1 img{
    width: (52rem / @font-size);
    height: (62rem / @font-size);
}

.search-2 img{
    transform: translate((-60rem / @font-size),(-5rem / @font-size));
    width: (233rem / @font-size);
    height: (73rem / @font-size);
}

.search-3 img{
    width: (52rem / @font-size);
    height: (62rem / @font-size);
}

// 搜索框
header{
    position: relative;
    height: (410rem / @font-size);
    background-color: #fff;
}

.search-bd{
    position: relative;
    padding: 0 (23rem / @font-size);
    padding-top: (20rem / @font-size);
    background-color: #ffdb47;
    height: (280rem / @font-size);
    border-radius: 0px 0px (20rem / @font-size) (20rem / @font-size);
}

.search{
    position: relative;
    background-color: #fff;
    border-radius: (33rem / @font-size);
    height: (65rem / @font-size);
    text-indent: (70rem / @font-size);
    font-size: (20rem / @font-size);
    line-height: (65rem / @font-size);
}

.search::before{
    position: absolute;
    top: (8rem / @font-size);
    left: (18rem / @font-size);
    content: '';
    display: block;
    width: (50rem / @font-size);
    height: (50rem / @font-size);
    background: url(../imagin/search-4.png);
    background-size: (50rem / @font-size) auto;
}

.search-content{
    position: absolute;
    bottom: (3rem / @font-size);
    left: (25rem / @font-size);
    overflow: hidden;
    border-radius:(20rem / @font-size);
    width: (700rem / @font-size) ;
    height: (220rem / @font-size) ;
    
}

.search-content img{
    width: (700rem / @font-size);
    height: (220rem / @font-size) ;
}

// 图片2
.search-content-1{
    margin-top: (10rem / @font-size);
    width: (750rem / @font-size);
    height:(225rem / @font-size);
}

.search-content-1 img{
    width: 100%;
    
}
// 头部end

// nav start

nav{
    margin-top: (30rem / @font-size);
    display: flex;
    flex-wrap: wrap;
}

nav div:nth-child(n+6){
    margin-top: (20rem / @font-size);
}

nav div{
    width: 20%;
    text-align: center;
    font-size: (28rem / @font-size);
}

nav div p{
    margin-top: (20rem / @font-size);
}
nav div span[class^="nav-icon"]{
    display: block;
    margin: auto;
    text-align: center;
    width: (85rem / @font-size);
    height: (80rem / @font-size);
    background: url(../imagin/nav-1.png) no-repeat;
    background-size: (85rem / @font-size) auto !important;
}
.nav-icon-2{
    background: url(../imagin/nav-2.png) no-repeat  !important;
}
.nav-icon-3{
    background: url(../imagin/nav-3.png)  no-repeat !important;
}
.nav-icon-4{
    background: url(../imagin/nav-4.png) no-repeat !important;
}
.nav-icon-5{
    background: url(../imagin/nav-5.png) no-repeat !important;
}
.nav-icon-6{
    background: url(../imagin/nav-6.png) no-repeat !important;
}
.nav-icon-7{
    background: url(../imagin/nav-7.png) no-repeat !important;
}
.nav-icon-8{
    background: url(../imagin/nav-8.png) no-repeat !important;
}
.nav-icon-9{
    background: url(../imagin/nav-9.png) no-repeat !important;
}
.nav-icon-10{
    background: url(../imagin/nav-10.png) no-repeat !important;
}
// nav end


// 新闻
.news{
    margin-top: (60rem / @font-size);
}

.news ul li{
  float: left; 
}

.news ul li:nth-child(1){
    width: (350rem / @font-size);
    height: (233rem / @font-size);
}
.news ul li:nth-child(2){
    margin-right: (2rem / @font-size);
}

.news ul li:nth-child(n+2){
    width: (185rem / @font-size);
    height: (233rem / @font-size);
}
.news ul li img{
    width: 100%;
    height: (233rem / @font-size);
}